@import "@automattic/typography/styles/variables";
@import "@wordpress/base-styles/variables";

$help-center-blue: #3858e9;
$gray-700: #646970;

.odie-support-doc-link__container {
	border-bottom: 1px solid var(--studio-gray-5);

	&:first-child {
		a:focus, button:focus {
			border-radius: 8px 8px 0 0;
		}
	}

	&:last-child {
		border-bottom: 0;

		a:focus, button:focus {
			border-radius: 0 0 8px 8px;
		}
	}

	.odie-support-doc-link__link {
		display: block;
		width: 100%;

		a,
		button {
			&:hover {
				color: var(--wp-components-color-accent, var(--wp-admin-theme-color, $help-center-blue));
				cursor: pointer;

				svg {
					fill: var(--wp-components-color-accent, var(--wp-admin-theme-color, $help-center-blue));
				}
			}
			&:focus {
				color: var(--studio-gray-100);
				outline: $help-center-blue solid 2px;
				outline-offset: -2px;
			}
	
			display: flex;
			text-decoration: none;
			color: var(--studio-gray-900);
			font-size: $font-body-small;
			align-items: center;
			width: 100%;
			min-width: 0;
			box-sizing: border-box;

			svg {
				fill: $gray-700;
				flex-shrink: 0;
			}

			span {
				flex: 1 1 auto;
				min-width: 0;
				text-align: left;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}
}
